<template>
  <div class="table-wrap">
    <div class="flex-c-sb table-header">
      <div>
        <slot name="headerLeft"></slot>
      </div>
      <div class="flex-c icon-r">
        <slot name="headerRight"></slot>
        <a-popover content="刷新" class="btn-tooltip">
          <a-button type="text" @click="refresh">
            <template #icon>
              <icon-refresh />
            </template>
          </a-button>
        </a-popover>
        <a-popover content="帮助文档" class="btn-tooltip">
          <a-button type="text" @click="openInstructions">
            <template #icon>
              <icon-question-circle />
            </template>
          </a-button>
        </a-popover>
        <a-popover content="导出" v-if="showExport" class="btn-tooltip">
          <a-button type="text" @click="openExportDialog">
            <template #icon>
              <icon-export />
            </template>
          </a-button>
        </a-popover>
      </div>
    </div>
    <div class="table-con">
      <slot name="tableBody"></slot>
    </div>
    <!-- 多文件导出 -->
    <ExportDialogBatch v-if="showBatchExportDialog" :title="exportInfo.title" :exportDatas="exportInfo.exportDatas" :supportAll="exportInfo.supportAll" :seachData="seachData" :checkedList="checkedList" :isShow="showBatchExportDialog" @closed="showBatchExportDialog = false" />
    <!-- 单文件导出 -->
    <ExportDialog v-if="showSingleExportDialog" :exportInfo="exportInfo" :seachData="seachData" :checkedList="checkedList" :isShow="showSingleExportDialog" @closed="showSingleExportDialog = false" />
  </div>
</template>
<script lang="ts" setup>
  import { useRoute } from 'vue-router'
  import { ref, PropType, provide } from 'vue'
  import ExportDialogBatch from '@/components/Export/exportDialogBatch.vue'
  import ExportDialog from '@/components/Export/exportDialog.vue'
  import { ExportInfo } from '@/types/components'
  const emit = defineEmits(['refresh', 'success'])
  const props = defineProps({
    exportInfo: {
      type: Object as PropType<ExportInfo>,
      default: () => {},
    },
    seachData: {
      type: Object,
      default: () => {},
    },
    checkedList: {
      type: Array,
      default: () => [],
    },
    showExport: {
      type: Boolean,
      default: false,
    },
    fromLocation: {
      type: String,
      default: 'FBA发货单',
    },
  })
  provide('fromLocation', props.fromLocation)
  const route = useRoute()
  const showSingleExportDialog = ref(false)
  const showBatchExportDialog = ref(false)

  function refresh() {
    emit('refresh')
  }
  function openInstructions() {
    let documentUrl = route.meta.documentUrl || ''
    if (!documentUrl) return
    window.open(documentUrl as string, '_block')
  }
  // 导出
  function openExportDialog() {
    let type = props.exportInfo?.type
    if (!type) return
    if (type == 'single') {
      showSingleExportDialog.value = true
    } else {
      showBatchExportDialog.value = true
    }
  }
</script>

<style lang="less" scoped>
  .table-wrap {
    padding-bottom: 5px;
    background-color: #fff;
    .table-header {
      padding: 5px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid var(--color-border);
      :deep(.arco-btn) {
        height: 28px !important;
        line-height: 28px !important;
      }
      .icon-r {
        .arco-icon {
          font-size: 20px;
          color: #333;
        }
      }
    }
    .table-con {
      padding: 5px 10px 0;
      box-sizing: border-box;
    }
  }
</style>
